<template>
	<s-layout class="set-wrap" :title="$t('pages.changeUser.title')" :bgStyle="{ color: '#f6f6f6' }">
		<view class="container-list">
			<view
				class="user-item user-item-card"
				v-for="(item, index) in changeUserData"
				:key="item.id"
			>
				<view class="init-user" v-if="userInfo.id === item.id">{{$t('pages.changeUser.dqzh')}}</view>
				<view class="user-item-left">
					<view class="avatar-box ss-m-r-24">
						<image class="avatar-img" :src="sheep.$url.cdn(item.avatar)" mode="aspectFill"></image>
					</view>
					<view class="nick-name">{{ item.nickname }}</view>
				</view>
				<view class="user-item-right">
					<view class="user-btn user-change" v-if="userInfo.id !== item.id" @click="changeUser(item)">{{$t('pages.changeUser.title')}}</view>
					<view class="user-btn user-del" @click="delChangeUser(item)">{{$t('pages.changeUser.delZh')}}</view>
					<!-- <uni-icons :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> -->
				</view>
			</view>
		</view>
		<su-fixed bottom placeholder>
			<view class="ss-p-x-20 ss-p-b-40">
				<button
				  class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main"
				   @tap="showAuthModal('accountChange')"
				>
				  <text>{{$t('pages.changeUser.addZh')}}</text>
				  <uni-icons :size="16" color="#fff" type="plusempty" />
				</button>
			</view>
		</su-fixed>
		
	</s-layout>
</template>

<script setup>
	import { computed, reactive } from 'vue';
	import sheep from '@/sheep';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	
	import { useI18n } from 'vue-i18n'
	
	const { t }  = useI18n()
	
	// 用户信息
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const changeUserData = computed(() => sheep.$store('user').changeUserData);
	
	// 切换账户
	function changeUser(user) {
		uni.showModal({
			title: t('pages.changeUser.modalTitle'),
			content: t('pages.changeUser.qhzhm'),
			success: async (res) => {
				if (res.confirm) {
					await sheep.$store('user').initChangeUser(user)
					sheep.$router.go('/pages/index/user');
				}
			},
		});
	}
	
	async function delChangeUser(user) {
		if(changeUserData.value.length === 1) {
			const result = await sheep.$store('user').logout();
			if (result) {
			  sheep.$router.go('/pages/index/user');
			}
		}else {
			uni.showModal({
				title: t('pages.changeUser.modalTitle'),
				content: t('pages.changeUser.qhdelzhm'),
				success: async (res) => {
					if (res.confirm) {
						if(userInfo.value.id === user.id) {
							const res = await sheep.$store('user').delChangeUserData(user)
							await sheep.$store('user').initChangeUser(res[0])
							
							sheep.$router.go('/pages/index/user');
						}else {
							await sheep.$store('user').delChangeUserData(user)
						}
					}
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
	.container-list {
	  width: 100%;
	  padding: 20rpx;
	  box-sizing: border-box;
	}
	
	.user-item {
		position: relative;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.init-user {
			position: absolute;
			top: 0;
			left: 0;
			padding: 6rpx 20rpx;
			font-size: 24rpx;
			border-radius: 20rpx 0 20rpx 0;
			color: #fff;
			background-color: $yellow;
		}
		
		.user-item-left {
			display: flex;
			align-items: center;
			.avatar-box {
			  width: 100rpx;
			  height: 100rpx;
			  border-radius: 50%;
			  overflow: hidden;
			
			  .avatar-img {
			    width: 100%;
			    height: 100%;
			  }
			}
			
			.nick-name {
			  font-size: 34rpx;
			  font-weight: 400;
			  color: #333333;
			  line-height: normal;
			}
		}
		
		.user-item-right {
			.user-btn {
				padding: 6rpx 20rpx;
				margin: 20rpx;
				font-size: 24rpx;
				border-radius: 40rpx;
				color: #fff;
			}
			.user-del {
				background-color: $red;
			}
			.user-change {
				background-color: $golden;
			}
		}
	}
	
	.user-item-card {
		min-height: 160rpx;
	}
	.user-add {
		color: $golden;
		justify-content: center;
	}
	
	.loginout-btn {
	  width: 100%;
	  height: 80rpx;
	  border-radius: 40rpx;
	  font-size: 30rpx;
	}
</style>